<template>
  <div class="home">
    <HomeHeader></HomeHeader>
    <div class="contain">
      <div>
        <swiper :swiperList="swiperList"></swiper>
        <icon></icon>
        <location></location>
        <hot></hot>
        <like></like>
        <weekend :numList="numList"></weekend>
        <foot></foot>
      </div>
    </div>
  </div>
</template>
<script>
  // import BScroll from 'better-scroll'
  import HomeHeader from './pages/Header'
  import swiper from './pages/swiper'
  import icon from'./pages/icon'
  import location from './pages/location'
  import hot from './pages/hot'
  import like from './pages/like'
  import weekend from './pages/weekend'
  import foot from './pages/foot'
  import  { mapState } from 'vuex'
  export default {
    data(){
      return{
        swiperList:[],
        numList:[],
        changeCity:''
      }
    },
    components:{
      HomeHeader,
      swiper,
      icon,
      location,
      hot,
      like,
      weekend,
      foot
    },
    computed:{
      ...mapState(['city'])
    },
    methods:{
      getHttp(){
        this.$http.get('/api/data/homedata.json').then(res=>{
            let data=res.data.data;
            data.forEach((item,index)=>{
              if(item.city == this.city){
                
                this.swiperList=item.swiperList;
                this.numList=item.numList;
              }
            })
        })
      }
    },
    mounted(){
      this.getHttp();
      this.changeCity=this.city;
      // this.$http.get('/api/data/homedata.json').then(res=>{
      //   let data = res.data.data[0];
      //   this.swiperList = data.swiperList;
      //   this.numList=data.numList;
      // })
      // let container=this.$refs.container;
        // const scroll=new BScroll(container);
    },
    activated(){
      if(this.changeCity!=this.city){
        this.getHttp();
        this.changeCity=this.city
      }
    }
  }
</script>
<style scoped>
  .home{
    background:#f5f5f5;
  }
  .contain{
    position:absolute;
    top:0.88rem;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
  }
</style>
